import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

// import { validateCounterRange } from './count.component';

@Component({
  selector: 'app-custom-formcontrol',
  templateUrl: './custom-formcontrol.component.html',
  styleUrls: ['./custom-formcontrol.component.scss']
})
export class CustomFormcontrolComponent implements OnInit {
  form: FormGroup;

  outerCounterValue: number = 5;

  outerValue: number = 10;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.fb.group({
      counter: 5, // 设置初始值
      // outerCounterValue: 10,
      // outerValue: 20, // 设置validateCounterRange验证器
      // outerCounterValue: [10, validateCounterRange],
      // outerValue: [20, validateCounterRange], // 设置validateCounterRange验证器
    });
  }

}


// tips: ControlValueAccessor 是什么? 参考: https://segmentfault.com/a/1190000009070500
// ControlValueAccessor，因为它是表单模型和DOM 元素之间的桥梁。
// 要实现 Model -> View，View -> Model 之间的数据绑定，而这就是我们 ControlValueAccessor 要处理的问题。
